<template>
  <div id="workbench"
  v-loading="loading"
  :element-loading-text="$t('public.loadingText')"
  class="clearfix" :class="{'navMenuState': navMenuState}">
    <div class="workbench">
      <div class="welcome"><span>{{$t('workbench.welcome',{exten})}}</span><span class="refresh" @click.stop="refresh"><i class="iconfont icon-shuaxin"></i>{{$t('public.refresh')}}</span></div>
      <notice ref="notice"></notice>
      <workbench-summarylist
        v-if="flag === 'kf'"
        ref="summary"
        v-bind:summary-list="summaryList"></workbench-summarylist>
      <workbench-business
        v-if="flag === 'kf'"
        v-bind:data="business"></workbench-business>
      <workbench-planninglist
        ref="planninglist"></workbench-planninglist>
      <workbench-top10list
         v-if="flag === 'kf'"
        ref="top10"
         v-bind:today-data="top10list.todayTop10"
        ></workbench-top10list>
        <change-user-info-dailog></change-user-info-dailog>
    </div>
  </div>
</template>
<script>
  import Notice from './Notice.vue'
  import workbenchSummarylist from './SummaryList.vue'
  import workbenchBusiness from './Business.vue'
  import workbenchPlanninglist from './PlanningList.vue'
  import workbenchTop10list from './Top10List.vue'
  import ChangeUserInfoDailog from './ChangeUserInfoDailog.vue'
  import {deepClone, getCallTimeLength} from '@/utils/m7Utils.js'
  export default {
    name: 'work-bench',
    components: {
      workbenchSummarylist,
      workbenchBusiness,
      workbenchPlanninglist,
      workbenchTop10list,
      ChangeUserInfoDailog,
      Notice
    },
    data () {
      return {
        flag: this.$store.getters.isEcommerce ? 'ecommerce' : 'kf',
        exten: '',
        random: 0,
        loading: false,
        myOutTodayCall: {all: 0, complete: 0},
        myTodayCall: {all: 0, complete: 0},
        todayTransferCdrData: {all: 0, complete: 0},
        DialinTimeLength: '00:00:00',
        DialoutTimeLength: '00:00:00',
        type:'',
      }
    },
    computed: {
      noticeBusJump () {
        return this.$store.state.noticeWenJump.random
      },
      top10list () {
        let data = deepClone(this.$store.getters.top10list)
        for (let i in data) {
          let item = data[i]
          for (let n in item) {
            let length = item[n].length
            for (let m = 0; m < 10 - length; m++) {
              data[i][n].push({name: '- -', score: '- -'})
            }
          }
        }
        return data
      },
      myCall () {
        return this.$store.state.monitor.agentStateChange.randomBar
      },
      summaryList () {
        let data = deepClone(this.$store.state.workbench.summaryList)
        // end
        data.todayCdrData = this.myTodayCall
        data.todayOutCdrData = this.myOutTodayCall
        data.DialinTimeLength = this.DialinTimeLength
        data.DialoutTimeLength = this.DialoutTimeLength
        data.todayTransferCdrData = this.todayTransferCdrData
        return data
      },
      business () {
        return this.$store.state.workbench.business
      },
      navMenuState () {
        return this.$store.state.navMenuState || false
      }
    },
//    beforeRouteUpdate (to, from, next) {
//      // 再次进入通话模块时把之前的路由还回去
//      let that = this
//      if (to.query && to.query.refresh) {
//        that.openNotice()
//      }
//      next()
//    },
    watch: {
      $route (to, from) {
        if (to.query && to.query.refreshNotice) {
          this.openNotice()
        }
      },
      noticeBusJump () {
        let data = this.$store.state.noticeWenJump
        if (data.module === 'workbenchesNot') {
          this.$nextTick(() => {
            this.openNotice()
          })
        }
      },
      myCall () {
        this.handleCall()
      }
    },
    methods: {
      openNotice () {
        this.$nextTick(() => {
          this.$refs.notice.open()
        })
      },
      handleCall () {
        let currentAgent = this.$store.state.session.user
        let todayCall = window.phone_peers
        for (let i in todayCall) {
          if (i === currentAgent._id) {
            this.DialinTimeLength = getCallTimeLength(Math.ceil(todayCall[i].DialinTimeLength / 1000))
            this.DialoutTimeLength = getCallTimeLength(Math.ceil(todayCall[i].DialoutTimeLength / 1000))
            this.myOutTodayCall = {all: todayCall[i].OutCalls, complete: todayCall[i].OutComplete}
            this.myTodayCall = {all: todayCall[i].InCalls, complete: todayCall[i].InComplete}
            // 从软电话条获取转接的数据
            this.todayTransferCdrData = {all: todayCall[i].TransferCalls, complete: todayCall[i].TransferComplete}
            // this.myTodayCall = {all: todayCall[i].InCalls + todayCall[i].TransferCalls, complete: todayCall[i].InComplete + todayCall[i].TransferComplete}
          }
        }
      },
      fetchData () {
        // 获取到座席的操作系统
        this.$store.dispatch('collectAgentPCInfo')
        if (this.flag !== 'ecommerce') {
          let pro1 = this.$store.dispatch('queryAgentMultiChannelDayData')
          let pro2 = this.$store.dispatch('queryPlanningList')
          Promise.all([pro1, pro2]).then(([rep1, rep2]) => {
            this.loading = false
          })
        } else {
          this.$store.dispatch('queryPlanningList').then(res => {
            this.loading = false
          })
        }
      },
      refresh () {
        this.loading = true
        this.fetchData()
        this.$nextTick(() => {
          this.$refs.notice.open()
          this.$refs.planninglist.initData()
        })
        this.$refs.summary.load()
        this.$refs.top10.load()
      },
      getMonthData(){
        this.$store.dispatch('queryAgentMultiChannelMonthUpData').then(res => {
          if(res && res.success) {
            this.summaryListMonth = res.summaryList
            this.monDialinTimeLength = getCallTimeLength(this.summaryListMonth.monthCallTimeLength.in)
            this.monDialoutTimeLength = getCallTimeLength(this.summaryListMonth.monthCallTimeLength.out)
            this.$set(this.monthCdrData,'all',this.summaryListMonth.monthCdrData.all)
            this.$set(this.monthCdrData,'complete',this.summaryListMonth.monthCdrData.complete)
            this.$set(this.monthCallOutData,'all',this.summaryListMonth.monthCallOutData.complete)
            this.$set(this.monthCallOutData,'complete',this.summaryListMonth.monthCallOutData.complete)
            this.$set(this.monthTransferCdrData,'all',this.summaryListMonth.monthTransferCdrData.complete)
            this.$set(this.monthTransferCdrData,'complete',this.summaryListMonth.monthTransferCdrData.complete)
            this.$set(this.monthWxData,'all',this.summaryListMonth.monthWxData.complete)
            this.$set(this.monthWxData,'complete',this.summaryListMonth.monthWxData.complete)
            this.$set(this.monthInternetData,'all',this.summaryListMonth.monthInternetData.complete)
            this.$set(this.monthInternetData,'complete',this.summaryListMonth.monthInternetData.complete)
            this.$set(this.monthAppData,'all',this.summaryListMonth.monthAppData.complete)
            this.$set(this.monthAppData,'complete',this.summaryListMonth.monthAppData.complete)
            this.$set(this.monthMailData,'all',this.summaryListMonth.monthMailData.complete)
            this.$set(this.monthMailData,'complete',this.summaryListMonth.monthMailData.complete)
            this.flag = false
          } else {
            this.summaryListMonth = {}
          }
        })
      },
      getTopMonthData(){
        this.$store.dispatch('queryAgentMultiChannelMonthDownData').then(res => {
          if(res && res.success) {
            this.$store.dispatch('getCache', {type: 'agents'}).then(agents => {
              res.top10list.monthTop10.imTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.mailTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.cdrTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.callOutTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              res.top10list.monthTop10.businessTop10.forEach((data) => {
                let agentId = data._id
                let agent = filter(agents, {_id: agentId})
                data.name = agent.length > 0 ? agent[0].displayName : ''
              })
              this.$set(this,'monthData',res.top10list.monthTop10)
              // 没有的补空
              for (let n in this.monthData) {
                let length = this.monthData[n].length
                for (let m = 0; m < 10 - length; m++) {
                  this.monthData[n].push({name: '- -', score: '- -'})
                }
              }
            })
            this.flag = false
          } else {
            this.monthData = {}
          }
        })
      },
    },
    beforeMount () {
//      百度统计登录语言类型
      if (window.localStorage && window.localStorage.lang && window.sessionStorage && (!window.sessionStorage.loginType || window.sessionStorage.loginType !== 'sessionId')) {
        window._hmt && window._hmt.push(['_trackEvent', '语言版本', window.localStorage.lang])
      }

      let node = document.getElementById('mainHtml')
      if (node) {
        node.style.backgroundColor = '#fff'
      }
      if (this.$store.state.session.user) {
        if (this.$store.state.session.user.displayName) {
          this.exten = ' ' + this.$store.state.session.user.displayName + '[' + this.$store.state.session.user.exten + ']'
        } else {
          this.exten = ' ' + this.$store.state.session.user.exten
        }
      } else {
        this.exten = ''
      }
      this.fetchData()
      this.$store.commit('CHANGE_PASSWORD_ADVICE')
      this.handleCall()
    }

  }
</script>
<style lang="stylus" scoped>
  @import "styl/_workbench.styl";
  @import "../../../assets/common.styl"
  #workbench
    height calc(100vh - 3.786em)
    background-color $c-back
  .workbench
    box-sizing border-box
    padding 11px
    overflow auto
    height 100%
    .welcome
      font-size 14px
      color $cf-gray3
      padding 10px 5px
      height 18px
      .refresh
        float right
        cursor pointer
        .iconfont
          color $c-main
          margin-right 6px
</style>
